<template>
  <div>
    <CloudTabs :tabList="tabList" defaultKey="horizontal" v-model="currentTab" @change="tabChange"></CloudTabs>
    <CloudForm :layout="currentTab">
      <CloudFormItem label="Field A" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <CloudInput placeholder="input placeholder"></CloudInput>
      </CloudFormItem>
      <CloudFormItem label="Field B" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <CloudInput placeholder="input placeholder"></CloudInput>
      </CloudFormItem>
       <CloudFormItem label="Field C" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <CloudInput placeholder="input placeholder"></CloudInput>
      </CloudFormItem>
      <CloudFormItem :wrapperCol="btnItemLayout.wrapperCol">
        <CloudButton type="primary" >Submit</CloudButton>
      </CloudFormItem>
    </CloudForm>
  </div>
</template>

<script>
export default {
  title: '1.排列方式',
  data() {
    return {
      currentTab: 'horizontal',
      tabList: [{
        key: 'horizontal',
        tab: 'horizontal'
      },
      {
        key:'vertical',
        tab: 'vertical'
      },
       {
        key:'inline',
        tab: 'inline'
      }]
    }
  },
  computed: {
    formItemLayout() {
      const { currentTab } = this;
      return currentTab === 'horizontal'
        ? {
            labelCol: { span: 2 },
            wrapperCol: { span: 10 },
          }
        : {};
    },
    btnItemLayout () {
      const { currentTab } = this;
      return currentTab === 'horizontal'
        ? {
            wrapperCol: { span: 14, offset: 2 },
          }
        : {};
    }
  },
  methods: {
    tabChange (val) {
      this.currentTab = val
    }
  }
}
</script>

<style lang="scss">
.cloud-form {
  margin-left: 20px;
  margin-top: 12px;
}
</style>